import React, { useState, useEffect } from 'react'
import { Card, Button, Form, Input, InputNumber, Cascader, message } from "antd"
import { Link } from "react-router-dom"
import { findCascadeData } from "@/apis/category"
import MyUpload from '../../components/MyUpload'
import { addProduct } from "@/apis/goods"


export default function ProductAdd() {
  const [options, setOptions] = useState([])
  const [typeId, setTypeId] = useState("")
  const [uploadUrl, setUploadUrl] = useState("")
  const [messageApi, contextHolder] = message.useMessage();
  useEffect(() => {
    fetchData()
  }, [])
  const fetchData = async () => {
    const res = await findCascadeData({ parentId: 0 })
    console.log(res);
    setOptions(res.data.data)
  }
  const onFinish = async (values) => {
    values.type = typeId
    //http://127.0.0.1:8080/wechart-124y72728.jpg
    values.imgSrc = uploadUrl
    console.log('Success:', values);
    const res = await addProduct(values)
    console.log(res);
    if (res.code == 1) {
      messageApi.success("添加成功")
      //添加
    } else {
      messageApi.error("添加失败")
    }
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const typeChange = (value, value2) => {
    console.log(value, value2);
    const typeId = value2[1].id
    setTypeId(typeId)
  }
  const getUploadElementPath = (value) => {
    setUploadUrl(value)
  }
  return (
    <Card
      title=" 添加商品"
      extra={<Link to="/home/list">返回</Link>}
      style={{
        width: "100%",
      }}>
      <Form
        name="basic"
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          maxWidth: 800,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="商品名字"
          name="name"
          rules={[
            {
              required: true,
              message: '用户名不能为空',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="商品描述"
          name="title"
          rules={[
            {
              required: true,
              message: '商品描述不能为空',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="商品价格"
          name="price"
          rules={[
            {
              required: true,
              message: '商品价格不能为空',
            },
          ]}
        >
          <InputNumber />
        </Form.Item>
        <Form.Item
          label="商品类型"
          name="type"
        >
          <Cascader options={options} onChange={typeChange} placeholder="请选中分类" />
        </Form.Item>
        <Form.Item
          label="商品图片"
          name="imgSrc"
        >
          <MyUpload action="http://127.0.0.1:8002/goods/fileUpload" fileName="imgSrc" getUploadElementPath={getUploadElementPath}></MyUpload>
        </Form.Item>
        <Form.Item
          label="商品详情"
          name="msg"
        >
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </Card>
  )
}
